
<template>
    <div class="bx-editor back">
        <van-nav-bar title="收款" left-text="返回" left-arrow border fixed @click-left="$router.go(-1)" />
        <div style="height:50px"></div>
        <div v-if="type =='set'">
            <div>
                <van-cell-group>
                    <van-field v-model="balance" class="fieldNo" label="客户费用结余" placeholder="客户当前费用结余" size="large" readonly />
                    <van-field v-model="order_price" class="fieldNo" label="本次投保费金额" placeholder="本次投保费金额" size="large" readonly />
                    <van-field v-model="money" required label="本次实收款金额" placeholder="本次实收款金额" type="number" />
                    <van-field v-model="invoice_price" required label="本次开票金额" placeholder="本次开票金额" type="number" />
                </van-cell-group>
                <div class="up-img">
                    <div>打款凭证上传</div>
                    <van-uploader v-model="img" multiple :max-count="1" :after-read="afterRead" :name="1">
                        <img class="up-icon" src="../../../assets/img/money_evidence.png" alt="">
                    </van-uploader>
                </div>
            </div>
            <div class="foot-btn">
                <div class="blue-btn" @click="save">确认</div>
                <div class="blue-btn" @click="pushInfo">保存</div>
            </div>
        </div>
        <div v-else>
            <div>
                <van-cell-group>
                    <van-field v-model="balance" class="fieldNo" label="客户费用结余" placeholder="客户当前费用结余" size="large" readonly />
                    <van-field v-model="order_price" class="fieldNo" label="本次投保费金额" placeholder="本次投保费金额" size="large" readonly />
                    <van-field v-model="money" label="本次实收款金额" placeholder="本次实收款金额" type="number" readonly />
                    <van-field v-model="invoice_price" label="本次开票金额" placeholder="本次开票金额" type="number" readonly />
                </van-cell-group>
                <div class="up-img">
                    <div>打款凭证</div>
                    <img class="up-icon" :src="annex">
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "jrInsuranceMonye",
    data() {
        return {
            type: 0,

            order_price: 0,
            balance: 0,
            order_id: 0,
            money: '',
            invoice_price: '',
            qiniuToken: {},
            img: [],
            annex: '',
        };
    },
    methods: {

        getQiniuToken() {
            this.$post("/api/qiniu/up_token", {})
                .then(res => {
                    this.qiniuToken = res
                })
                .catch(err => {});

        },
        // 方法
        getInfo() {
            let params = {
                wx_member_id: localStorage.getItem('wx_member_id'),
                token: localStorage.getItem('token'),
                cate_id: 1,
                order_id: this.$route.query.id,
            };
            this.$post("/api/order_detail/confirm_settlement", params)
                .then(res => {
                    if (res.code == 1) {
                        this.order_price = res.data.order_price
                        this.order_id = res.data.id
                        this.balance = res.data.balance
                        this.annex = res.data.annex
                        this.money = res.data.money
                        this.invoice_price = res.data.invoice_price
                        
                        this.img = {
                            url: res.data.annex
                        }
                        this.check_state = res.data.check_state
                    } else {
                        this.$Toast(res.msg)
                    }
                })
                .catch(err => { });
        },
        afterRead(file, index) {
            let { name } = index
            this.$Toast.loading({
                message: '上传中',
                duration: 0,
                forbidClick: true
            });
            this.$QiniuUpload(this.qiniuToken, file)
                .then(res => {
                    this.$Toast.clear();
                    this.img = [
                        { url: this.qiniuToken.domain + res.key },
                    ]
                })
                .catch(err => {
                    this.$Toast.clear();
                });

        },
        pushInfo() {
            if (!this.money) {
                this.$Toast('请填写收款金额')
                return;
            }
            if (!this.invoice_price) {
                this.$Toast('请填写开票金额')
                return;
            }
            if (this.img.length == 0) {
                this.$Toast('请上传打款凭证')
                return;
            }
            let msg = `确认收款 " ${this.money} " 元么`
            this.$Dialog.confirm({
                title: '温馨提示',
                message: `确认收款 ${this.money} 元么?`,
                closeOnPopstate: true,
            })
                .then(() => {
                    let params = {
                        wx_member_id: localStorage.getItem('wx_member_id'),
                        token: localStorage.getItem('token'),
                        id: this.$route.query.id,
                        annex: '',
                        money: this.money,
                        cate_id: 1,
                        invoice_price: this.invoice_price,
                    };
                    if (this.img.length != 0) {
                        params.annex = this.img[0].url
                    }
                    this.$post("/api/order_detail/save_confirm_settlement", params)
                        .then(res => {
                            if (res.code == 1) {
                                this.$Toast(res.msg);
                                this.$router.go(-1)
                            }
                        })
                        .catch(err => { });
                })
                .catch(() => { });
        },

        save() {
            this.$dialog.confirm({
                title: '提示',
                message: '确认收款么？'
            }).then(() => {
                let params = {
                    token: localStorage.getItem('token'),
                    wx_member_id: localStorage.getItem('wx_member_id'),
                    id: this.$route.query.id,
                }
                this.$post("/api/order_detail/save_confirm_settlement", params)
                    .then(res => {
                        if (res.code == 1) {
                            this.$Toast(res.msg);
                            setTimeout(() => {
                                this.$router.go(-1)
                            }, 1500);
                        } else {

                            this.$Toast(res.msg);
                        }
                    })
                    .catch(err => { });
            }).catch(() => {
                // on cancel
            });

        },
    },
    beforeCreate() {
    },
    created() {
        this.type = this.$route.query.type
        this.getQiniuToken();
        // 实例创建完成
        this.getInfo();
    },
};
</script>

<style lang="less">
.fieldNo {
    > div:nth-of-type(2) {
        input {
            background: #c8c8c8 !important;
        }
    }
}
.up-img .van-image__img {
    object-fit: cover !important;
}
.van-uploader__preview {
    width: 62vw;
    margin: 0 !important;
    > div {
        width: 100% !important;
    }
}
</style>
<style lang="less" scoped>
.back {
    height: 100vh;
    // background-color: #f8f8f8;
}
.foot-btn {
    padding: 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    padding-bottom: 80px;
}

.up-img {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #333;
    font-size: 13px;
    padding: 10px 15px 10px 0;
    background-color: #fff;

    > div:nth-of-type(1) {
        margin-left: 13px;
        margin-right: 22px;
    }

    .up-icon {
        width: 62vw;
        // height: 112px;
    }
}
</style>